<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/WEB-INF/public/head.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>jQuery图片翻转弹出动画特效DEMO演示</title>

    <link href="${system}/static/css/expander.css" rel="stylesheet">
    <link href="${system}/static/css/theme.css" rel="stylesheet">
    <script src="${system}/static/js/jquery-latest.min.js" type="text/javascript"></script>
    <script src="${system}/static/js/expander.min.js"></script>
    <script>
        var index = 0;
        var timeout = setInterval(function () {
            if (index > 10) {
                window.clearInterval(timeout)
            }
            $("article").eq(index).addClass("show");
            index++
        }, 300);

        function showFoo() {
            $("#fooId").trigger("expand");
        }

        $("#expandSettings").on("click", function () {
            if ($("ul.settings").hasClass("open")) {
                $("ul.settings").removeClass("open");
            } else {
                $("ul.settings").addClass("open");

            }
        });
    </script>
    <style>
    </style>
</head>
<body>
<br>
<div style="text-align:center;clear:both">
</div>
<section class="main">
    <article style="width:100%; margin-top:10%;">
        <div class="imgContainer">
            <h5>效果一</h5>
            <img src="${system}/idcard/${user_id}/getPositive" data-expander='{animation:"default"}'>
        </div>
        <div class="imgContainer" style="float:right; padding-right:70px;">
            <h5>效果一</h5>
            <img src="${system}/idcard/${user_id}/getReverseSide" data-expander='{animation:"default"}'>
        </div>

    </article>
</section>
</body>
</html>


